<template>
  <div id="EditorTab">
        <div id="TabBar" >
        <!-- 使用 chips 纸片 -->
            <!-- close close-icon="mdi-close" -->
          <div v-for="(item, k) in files" :key="k"
            @click="setIndex(k)" :class="btnClass(k)" >
              {{item.name}}
              <v-btn class="close-btn" icon @click.stop="close(k)" small>
                <v-icon x-small color="black">mdi-close</v-icon>
              </v-btn>
              <v-btn class="changed" icon small v-show="ifChanged(k)">
                <v-icon x-small color="#008ae1">mdi-record</v-icon>
              </v-btn>
            </div>
            <!-- <div style="flex-grow:0;"></div> -->
        </div>
        <div id="TabContent">
            <div v-for="(item, k) in htexts" :key="k" v-show="index==k">
              <card v-on:changed="changed()" v-show="showcard(k)" ref="text" ><div v-html="htexts[k].text"></div></card>
              <!-- <component :is="card2" v-show="showcard(k)" >{{htexts[k].text}}</component> -->
            </div>
        </div>
  </div>
</template>

<script>
import Card from "../editor/Card";

export default {
  data(){
    return {
      index:0,
      files:[
        // {"filename":"package.json", "changed": false},
      ],
      htexts:[
        // {"text":""},
      ],
    }
  },
  components:{ 
    Card,
  },
  methods:{
    setIndex(index) {
      this.index= index
    },
    btnClass(i) {
      return i==this.index ? "active-tab" : ""
    },
    close(index){
      this.files.splice(index, 1)
      this.htexts.splice(index, 1)
      this.autofocus()
    },
    autofocus() { // 自动选择一个标签聚集
      if(this.files.length) this.index = this.files.length -1
    },
    // 展示一个文件，可以被父组件调用
    showfile(item) {
      if(item && item[0] && !this.tryFocusFile(item[0])){ 
        const fs = require("fs")
        fs.readFile(item[0].filepath, 'utf-8', (err, data) => {
          // console.log(data)
          if(!err){
            // 读取文本源编码之后，需要进行转化编码成对应 html 进行解码
            this.htexts.push({"text": data.replace(/\n/g, '<br />')})
          }
        })
        this.files.push( {"name": item[0].name, "filepath": item[0].filepath, "changed": false})
        this.index = this.files.length - 1
      }
    }, 
    // 保存一个文件内容
    saveFile() {
      if(this.files.length == 0) return
      const filepath = this.files[this.index].filepath
      // 这里因为在 for 中的 ref 会被做成数组的形式
      let text = this.$refs.text[this.index].getText()
      // 默认 div 获取 innerText 变成 \n 这里转化
      // text.replace("\n", "\r\n")
      const fs = require("fs")
      fs.writeFile(filepath, text, (err) => {
        // console.log(text)
        if(err) {
          console.log("editortab savefile error:" + err)
        }
      })
      this.unchanged()
    },
    // 尝试匹配到已有的文件上
    tryFocusFile(file) {
      const _self = this
      let fileExist = false
      this.files.forEach((f, i) => {
        if(f.name == file.name && f.filepath == file.filepath) {
          _self.index = i
          fileExist = true
          return
        }
      })
      return fileExist
    },
    showcard(k) {
      return this.index == k
    },
    closeAll() {
      this.files = []
      this.htexts = []
      this.index = 0
    },
    changed() {
      this.files[this.index].changed = true
      this.$forceUpdate()
    },
    unchanged() {
      this.files[this.index].changed = false
    },
    ifChanged(k) {
      return this.files[k].changed
    },
  }
}
</script>

<style lang="scss" scoped>
#EditorTab {
    flex:1;
    flex-shrink: 0;
    width:1px; // 重要! 用来防止 flex 嵌套后被子元素撑开。
    font-size:14px; 
  
  #TabBar {
    position:relative;
    background-color:#e4e4e4;
    height: 30px;
    width:100%;
    display:flex;
    cursor: pointer;
    user-select: none;
    
    >div {
      border-right:1px solid #f1f1f1;
      flex-grow:0;
      display:inline-block;
      position:relative;
      line-height:30px;
      padding:0 24px 0 12px;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
    }

    :hover .close-btn {
      display:initial;
    }
  }
}

#TabContent {
  flex:1;
  flex-grow:0;
  flex-shrink:0;
  height:100vh;
  margin-top:-66px;
  padding-top:66px;
  overflow:scroll;
}

.close-btn {
  display:none;
  position:absolute;
  right:0;
}
.changed {
  position:absolute;
  right:0;
}
.active-tab{
    background:#fff;
    .close-btn {
      display:initial;
    }
    .changed {
      display:none ;
    }
}
.v-tab{
  padding-right: 2px !important; 
}


</style>